<extend file='resource/view/master'/>
<block name="content">
	<ul class="nav nav-tabs" role="tablist">
		<li><a href="{{u('index')}}">商品管理</a></li>
		<li class="active"><a href="">商品添加</a></li>
	</ul>

	<form class="form-horizontal"  id="form" action="" method="post" onsubmit="return goodsAdd()">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">商品管理</h3>
			</div>
			<div class="panel-body">
				<div class="form-group">
					<label for="" class="col-sm-2 control-label">商品名称</label>
					<div class="col-sm-9">
						<input type="text" name="gname"  class="form-control" placeholder="请填写商品名称">
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2 control-label">所属分类</label>
					<div class="col-sm-9">
						<select class="js-example-basic-single form-control" name="cid">
							<option value="0">请选择分类</option>
							<foreach from="$catedata" key="$k" value="$v">
								<option value="{{$v['cid']}}" tid="{{$v['tid']}}">{{$v['_cname']}}</option>
							</foreach>
						</select>
					</div>
				</div>
				<script>
					$(function(){
						$('select[name=cid]').change(function(){
							//获取具有selected属性的元素
							var tid=$(':selected').attr('tid');
							if(tid==0){
								alert('不能给顶级分类添加商品');
								$(this).val(0);
								return false;
							}
							$.post("{{u('ajaxGetAttr')}}",{tid:tid},function(res){
								var attr='';/*属性*/
								var spec='';/*规格*/
								attr +='<table class="table table-striped">';
								spec +='<table class="table table-striped">';

								$.each(res,function(k,v){
									if(v.class==1){//说明是属性
										attr +='<tr><td>'+ v.taname+'</td><td>';
										attr +='<select name="attr['+ v.taid+']" id=""><option value="0">请选择</option>';
										$.each(v.tavalue,function(kk,vv){
											attr +='<option value="'+vv+'">'+vv+'</option>';
										})
										attr += '</select></td></tr>';
									}else{
										spec += '<tr><td>'+ v.taname+'</td><td>';
										spec += '<select name="spec['+ v.taid+'][guige][]" id=""><option value="0">请选择</option>';
										$.each(v.tavalue,function(kk,vv){
											spec += '<option value="'+vv+'">'+vv+'</option>';
										})
										spec += '</select></td><td>附加价格</td>';
										spec += '<td><input type="text" name="spec['+ v.taid+'][added][]"></td><td><button type="button" class="btn btn-primary btn-xs addspec">添加</button></td></tr>';
									}
								})
								attr +='</table>';
								spec += '</table>';
								$('#attr').html(attr);
								$("#spec").html(spec);
							},'json')

						})
					})
				</script>
				<!--点击添加按钮添加一个规格-->
				<script>
					$(function(){
						$('#spec').delegate('.addspec','click',function(){
							//将父级tr复制一份
							var tr=$(this).parents('tr').clone();
							//找到添加按钮将其删除，换成删除按钮
							tr.find('.addspec').remove();
							var del='<button type="button" class="btn btn-danger btn-xs delspec">删除</button>';
							tr.find('td').eq(4).append(del);
							$(this).parents('tr').after(tr);
						})
						$('#spec').delegate('.delspec','click',function(){
							$(this).parents('tr').remove();
						})
					})
				</script>
				<div class="form-group">
					<label for="" class="col-sm-2 control-label">所属品牌</label>
					<div class="col-sm-9">
						<select class="js-example-basic-single form-control" name="bid">
							<option value="0">请选择品牌</option>
							<foreach from="$branddata" key="$k" value="$v">
								<option value="{{$v['bid']}}">{{$v['bname']}}</option>
							</foreach>
						</select>
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2 control-label">商品属性</label>
					<div class="col-sm-9" id="attr">

					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2 control-label">商品规格</label>
					<div class="col-sm-9" id="spec">
						<!--	                    商品规格-->

					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2 control-label">商品货号</label>
					<div class="col-sm-9">
						<input type="text" name="gnumber"  class="form-control" placeholder="">
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2 control-labe2">商品描述</label>
					<div class="col-sm-9">
						<input type="text" name="describe"  class="form-contro2" placeholder="">
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2 control-labe3">单位</label>
					<div class="col-sm-9">
						<input type="text" name="unit"  class="form-contro3" placeholder="">
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2 control-labe4">市场价</label>
					<div class="col-sm-9">
						<input type="text" name="marketprice"  class="form-contro4" placeholder="">
					</div>
				</div>

				<div class="form-group">
					<label for="" class="col-sm-2 control-label">商城价</label>
					<div class="col-sm-9">
						<input type="text" name="shopprice"  class="form-control" placeholder="">
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2 control-label">总库存</label>
					<div class="col-sm-9">
						<input type="text" name="total"  class="form-control" placeholder="">
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2 control-label">列表图</label>
					<div class="col-sm-9">
						<div class="input-group">
							<input type="text" class="form-control" name="pic" readonly="" value="">
							<div class="input-group-btn">
								<button onclick="upImage(this)" class="btn btn-default" type="button" >选择图片
								</button>
							</div>
						</div>
						<div class="input-group" style="margin-top:5px;">
							<img src="{{$field['thumb']?:'resource/images/nopic.jpg'}}" class="img-responsive img-thumbnail liebiaotu"
							     width="150">
							<em class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片" onclick="removeImg(this)">×</em>
						</div>
						<span class="help-block">建议大小(宽100高100)</span>
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2 control-label">商品图册</label>
					<div class="col-sm-9">
						<div class="input-group">
							<div class="input-group-btn">
								<button onclick="manyupImage(this)" class="btn btn-default" type="button">选择图片</button>
							</div>
						</div>
						<div class="input-group" id="box" style="margin-top:5px;">

						</div>
						<span class="help-block">建议大小(宽100高100)</span>
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2 control-label">点击次数</label>
					<div class="col-sm-9">
						<input type="text" name="click"  class="form-control" placeholder="">
					</div>
				</div>

				<div class="form-group">
					<label class="col-sm-2 control-label">商品详情</label>
					<div class="col-sm-9">
						<textarea id="intro" name="intro" style="height:300px;width:100%;"></textarea>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">售后服务</label>
					<div class="col-sm-9">
						<textarea id="service" name="service" style="height:300px;width:100%;"></textarea>
					</div>
				</div>
			</div>
		</div>
		<button class="btn btn-primary" type="submit">确定</button>
	</form>

</block>
<script>
	//上传
	function upImage(obj) {
		require(['util'], function (util) {
			util.image(function (images) {
				$("[name='pic']").val(images[0]);
				$(".liebiaotu").attr('src', images[0]);
			}, {})
		})
	}
	//异步删除图片
	function removeImg(obj) {
		var path=$("input:text[name=pic]").val();
		$(obj).prev('img').attr('src', 'resource/images/nopic.jpg');
		$(obj).parent().prev().find('input').val('');

		$.ajax({
			type:'post',
			url:"{{u('goods.removeImg')}}",
			data:{path:path}
		})
	}
	//百度编辑器
	require(['util'], function (util) {
		util.ueditor('container', {}, function (editor) {
			//这是回调函数 editor是百度编辑器实例
		});
	})
</script>
<script>
	//上传图片
	function manyupImage(obj) {
		require(['util'], function (util) {
			options = {
				//上传多图
				multiple: true,
			};
			util.image(function (images) {
				$(images).each(function(k,v){
					var li = '<li style="float: left;list-style: none"> <img src="'+v+'" class="img-responsive img-thumbnail" width="150"><input type="hidden" name="logo[]" value="'+v+'"></li>';

					$(li).appendTo('#box');
				})
			}, options)
		});
	}
</script>
<script>
	util.ueditor('service', {hash:2,data:'hd'}, function (editor) {
		//这是回调函数 editor是百度编辑器实例
	});
	util.ueditor('intro', {hash:2,data:'hd'}, function (editor) {
		//这是回调函数 editor是百度编辑器实例
	});
</script>
<script>
	function goodsAdd(){
		var data=$('#form').serialize();
		$.post("{{u('add')}}",data,function(res){
			if(res.valid)
			{
				util.message(res.message,"{{u('index')}}",'success');
			}else{
				util.message(res.message,'','error');
			}
		},'json')
		return false;
	}
</script>